<template>
  <div>
    <el-row class="lock-btn">
      <el-input v-model="queryParams.openId" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入openId"></el-input>
      <el-input v-model="queryParams.parkfieldName" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入场站名称"></el-input>
      <el-input v-model="queryParams.signName" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入打卡人员"></el-input>
      <el-button :disabled="userState" style="margin-left: 0.6%;margin-top: 0.2%;" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
    </el-row>
   
    <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
      <el-col :span="24">
        <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcredepositrequestTable" v-loading="loading" :data="list" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
          <el-table-column prop="openId" label="openId" width="280" sortable align="center">
          </el-table-column>
          <el-table-column prop="parkfieldName" label="场站名称" width="" sortable align="center">
          </el-table-column>
              
          <el-table-column prop="signDate" label="打卡时间" width="" align="center">
          </el-table-column>
          <el-table-column prop="signName" label="打卡人员" width="" align="center">
          </el-table-column>
         
          <el-table-column prop="notes" label="备注" width="" align="center">
          </el-table-column>
          <el-table-column prop="issueDesc" label="问题描述" width="" align="center">
          </el-table-column>
          

            <el-table-column prop="livePic" label="图片" width="180" align="center">

          <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
           
            查看
          </el-button>
        </template>
      
            </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
        </el-pagination>
      </el-col>
    </el-row>


    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" center width="1590px">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="70px"
      style=""
    >
      <el-image 
          style="width:1536px;height:864px;"
          :src="url" 
          :preview-src-list="srcList">
          <div slot="error" class="image-slot" style="text-align:center">
              暂无图片
          </div>
      </el-image>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
 
import { getNickName, getTestUserName,getRoleCode } from "../../util/auth";
import { inspactRecordApi } from "../../api/oplog.js";

export default {
  name: "oplog",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      labelWidth: "100px",
      loading: false,
      dialogTitle: "",
      pageNo: 1,
      pageSize:20,
      total: 0,
      multipleSelection: [],
      dialogFormVisible:false,
      dialogStatus: "",
      textMap: {
      update: "查看",
       create: "查看",
      },
      roleCode:'',
      queryParams:{
        openId:'',
        parkfieldName:'',
        signName:''
      },
      addDialog:false,
      parkfieldList: [],
      status: '',

    };
  },
  methods: {
    editBtn (index, row) {
      let _this = this;
      _this.$nextTick(()=>{
        if(_this.$refs.form != undefined){
          _this.$refs.form.resetFields();
        }
      });
      _this.feeForm = row;
      _this.addDialog = true;
    },
    
    
    procRefund (index, row, status) {
      let _this = this;
      _this.loading = true;
      procRefundApi(row.id, status).then(resp => {
        console.log(resp)
        _this.loadAbnormalOrder(this.pageNo, this.pageSize);
        _this.$notify({
              title: "成功",
              message: "已处理",
              type: "success"
            });
      });
    },
    handlePageChange (pageSize) {
      this.pageSize = pageSize;
      this.inspactRecord(this.pageNo, this.pageSize);
    },
    handleNoChange (pageNo) {
      this.pageNo = pageNo;
      this.inspactRecord(this.pageNo, this.pageSize);
    },
    handleTableChange (val) {
      this.multipleSelection = val;
    },

    
    inspactRecord(pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      inspactRecordApi( {
        signName:_this.queryParams.signName,
        openId:_this.queryParams.openId,
        parkfieldName:_this.queryParams.parkfieldName,
        pageNo:pageNo,
        pageSize:pageSize
      }).then(resp => {
          if (resp.errmsg === "ok") {
            console.log(resp.data.dataList);
            _this.total = resp.data.totalNum;
            _this.list = resp.data.dataList;
          }
          setTimeout(() => {
          _this.loading = false;
        }, 1 * 1000);
      });
    },

    handleUpdate(row) {
    this.url = '';
    this.temp = Object.assign({}, row); // copy obj
    this.temp.timestamp = new Date(this.temp.timestamp);
    this.dialogStatus = "查看";
    this.dialogFormVisible = true;
    console.log('1111111111111111111111111111111',this.url);
    this.url = row.livePic;
    this.$nextTick(() => {
      this.$refs["dataForm"].clearValidate();
    });
  },

    queryBtn () {
      let _this = this;
      _this.loading = true;
      const data = {
        signName:_this.queryParams.signName,
        openId:_this.queryParams.openId,
        parkfieldName:_this.queryParams.parkfieldName,
        pageNo:_this.pageNo,
        pageSize:_this.pageSize,
    };
    inspactRecordApi(data).then(resp => {
        _this.lcredepositrequests = resp.data;
        _this.total = resp.data.totalNum;
        _this.list = resp.data.dataList;
        _this.loading = false;
      });
    }
  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function () {
    let _this = this;
    _this.roleCode = getRoleCode()

    // const availScreenWidth = window.screen.availWidth;
    // const availScreenHeight = window.screen.availHeight + 40;

    // _this.availScreenWidth = availScreenWidth;
    // _this.availScreenHeight = availScreenHeight 

    // console.log("availScreenWidth",availScreenWidth)
    // console.log("availScreenHeight",availScreenHeight)

    this.$nextTick(function () {
      this.inspactRecord(_this.pageNo, _this.pageSize);
    });
  }
}
</script>

<style scoped>



.page-tool div {
  text-align: right;
}
img{
  width: 800px;
  height: 600px;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}
</style>